<template>
  <div>
    <div>
      <input type="text" v-model="form.id">
      <input type="text" v-model="form.name">
      <button @click="handleAdd">提交</button>
    </div>
    <ul>
      <li v-for="item, index in obj.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { useAddItem, useDelItem } from './hooks'
export default {
  setup() {
    const { obj, handleAdd, form } = useAddItem()
    const { handleDel } = useDelItem(obj)
    return { obj, handleAdd, form, handleDel }
  }
}
</script>